<template>
  <el-container>
    <el-main>
      <el-row class="enter-container">
        <div style="padding-left: 20px; margin-bottom: 30px; color: #6e7071">
          <h2 style="font-size: 28px">用户信息</h2>
        </div>
        <el-row :gutter="20">
          <el-col :span="17">
            <el-card class="box-card">
              <div slot="header">
                <span class="title-num el-icon-s-flag"> 刷题</span>
                <span class="allSolved">{{ getAll }}</span>
              </div>
              <ve-pie :data="chartData" :settings="settings" />
              <el-table
                :data="ojList"
                stripe
                border
                :header-cell-style="{backgroundColor: '#f6f6f6',
                                     color: '#0b0b0b', padding: '9px 0'}"
                :cell-style="{color:'#292929', padding: '8px 0'}"
                style="width: 100%"
              >
                <el-table-column align="center" type="index" label="#" width="50" />

                <el-table-column align="center" prop="ojName" label="OJ">
                  <template slot-scope="scop">
                    <el-link :underline="false" type="primary" :href="getHref(scop.row)" target="_blank">
                      {{ scop.row.ojName }}
                    </el-link>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="solved" label="通过数" />
                <el-table-column align="center" prop="submissions" label="提交数" />
                <el-table-column align="center" prop="ratio" label="通过率">
                  <template slot-scope="scop">{{ getRatio(scop.row) }}</template>
                </el-table-column>
              </el-table>
            </el-card>
            <el-card class="box-card" style="margin-top: 30px">
              <span slot="header" class="title-num el-icon-date"> 近期博客</span>
              <el-table
                :data="blogList"
                :header-cell-style="{backgroundColor: '#f1f1f1',
                                     color: '#000000', padding: '15px 0'}"
                :cell-style="{padding: '20px 0', color: '#2a2a2a'}"
                style="width: 100%"
              >
                <el-table-column align="center" prop="title" label="标题">
                  <template slot-scope="scop">
                    <el-link type="primary" @click="jumpDetail(scop.row.id)">{{ scop.row.title }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="updateDate" label="时间" width="200" />
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="7">
            <el-card class="box-card">
              <img :key="user.userImage" class="headImage" :src="user.userImage" alt="头像">
              <el-divider />
              <span class="font-bold">姓名：</span>
              <span>{{ user.userName }}</span>
              <el-divider />
              <span class="font-bold">CF Rating：</span>
              <span :style="getResultColor(user.userCfScore)">{{ user.userCfScore }}</span>
              <el-divider />
              <span class="font-bold">Email：</span>
              <span>{{ user.userEmail }}</span>
              <el-divider />
              <span class="font-bold">格言：</span>
              <span>{{ user.userMotto }}</span>
            </el-card>
          </el-col>
        </el-row>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { profile } from '@/networks/info'
import { resultCfColorMixin } from '@/common/mixins'

export default {
  name: 'Profile',
  mixins: [resultCfColorMixin],
  data() {
    this.settings = { limitShowNum: 6 }
    return {
      user: {},
      chartData: {
        columns: ['ojName', 'solved'],
        rows: []
      },
      ojList: [],
      blogList: [],
      Oj: {
        'NowCoder': 'https://ac.nowcoder.com/acm/contest/profile/',
        'Luogu': 'https://www.luogu.com.cn/user/',
        'HDU': 'http://acm.hdu.edu.cn/userstatus.php?user=',
        'Codeforces': 'https://codeforces.com/profile/',
        'LOJ': 'https://loj.ac/u/',
        'VJudge': 'https://vjudge.net/user/',
        'Leetcode': 'https://leetcode-cn.com/u/'
      }
    }
  },
  computed: {
    getAll() {
      let solved = 0; let submit = 0
      this.ojList.forEach(item => {
        solved += item.solved
        submit += item.submissions
      })
      return '总题量: ' + solved + ' / ' + submit
    }
  },
  activated() {
    this.init()
  },
  methods: {
    getRatio(val) {
      return (val.solved === 0 ? 0 : (val.solved / val.submissions * 100).toFixed(2)) + '%'
    },
    getHref(item) {
      return this.Oj[item.ojName] + item.account
    },
    init() {
      if (this.$route.query.id == null) {
        this.$message.error('地址错误')
        return
      }
      profile(this.$route.query.id)
        .then(res => {
          const data = res.data.data
          this.ojList = data.ojList
          this.blogList = data.blogList
          this.user = data.user
          this.chartData.rows = data.ojList
        })
    },
    jumpDetail(id) {
      this.$router.push({
        path: '/detailBlog',
        query: { id: id }
      })
    }
  }
}
</script>

<style scoped>
  .enter-container {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 1200px;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    position: relative;
    padding: 10px 10px;
  }

  .allSolved {
    font-size: 20px;
    border: 1px solid #bfbfbf;
    padding: 5px 10px;
    margin-bottom: 10px;
    float: right;
    color: #5f5f5f;
    border-radius: 5px;
    background-color: #f0f0f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .title-num {
    font-size: 26px;
  }

  .headImage {
    width: 100%;
    height: 100%;
  }

  .font-bold {
    font-weight: bolder;
  }

</style>
